<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height:60px">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click="hAdd"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="list">
              <el-table-column
                label="序号"
                width="120"
                type="index"
                :index="typeIndex"
              />
              <el-table-column
                label="
                角色名称"
                prop="name"
                width="240"
              />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="hAssign(scope.row.id)"
                  >分配权限</el-button>
                  <el-button
                    size="mini"
                    type="info"
                    @click="hEdit(scope.row)"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="hDel(scope.row.id)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件
                :current-page.sync="curPage"  动态绑定当前的页码
              -->
              <el-pagination
                :page-sizes="[5,7,10,20]"
                :total="total"
                :current-page.sync="curPage"
                :page-size="pageParams.pagesize"
                layout="sizes,prev,pager,next,jumper"
                @current-change="hCurrentChange"
                @size-change="hSizeChange"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

    <!-- 按下esc不要关闭弹框
        在遮罩上点击，不要关闭弹框 -->
    <el-dialog
      :title="isEdit ? '编辑角色' : '新增角色'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
      @close="hClose"
    >
      <el-form
        ref="form"
        label-width="120px"
        :rules="rules"
        :model="formData"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="formData.name" type="text" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="formData.description" type="textarea" />
        </el-form-item>

        <el-form-item>
          <el-button @click="showDialog=false">取消</el-button>
          <el-button type="primary" @click="hSubmit">确定</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!--  -->
    <el-dialog
      title="分配权限"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialogPermission"
    >
      <!-- 分配权限-子组件 -->
      <AssignPermission
        :id="curId"
        ref="assignPermission"
        @close="showDialogPermission=false"
        @success="hAssignPermSuccess"
      />
    </el-dialog>
  </div>
</template>
<script>
import AssignPermission from './assignPermission.vue'
import { getRoles, delRole, addRole, editRole } from '@/api/settings.js'
export default {
  name: 'Setting',
  components: { AssignPermission },
  data() {
    return {
      isEdit: false, // 是否是编辑
      showDialog: false, // 是否显示弹框
      formData: {
        name: '',
        description: ''
      },
      rules: {
        name: [{ required: true, message: '名字不能为空', trigger: 'blur' }]
      },
      curPage: 0, // 当前的页码

      total: 0, // 一共几条数据
      pageParams: {
        page: 1,
        pagesize: 5 // 每一页显示几条
      },
      list: [], // 角色列表信息
      curId: '', // 当前分配权限的角色的id
      showDialogPermission: false // 是否显示分配权限对话框
    }
  },
  computed: {
    // 当前的最后一页
    maxPage() {
      return Math.ceil(this.total / this.pageParams.pagesize)
    },
    // 看最后一页是不是满的
    isLastPageFulled() {
      return this.total % this.pageParams.pagesize === 0
    }
  },
  mounted() {
    window.addEventListener('keydown', e => {
      if (e.path[0].nodeName === 'BUTTON') {
        if (e.code === 'Space' || e.code === 'Enter') {
          e.preventDefault()
        }
      }
    })
  },
  created() {
    this.loadRoles()
  },
  methods: {
    typeIndex(index) {
      let curpage = this.pageParams.page
      const limitpage = this.pageParams.pagesize
      curpage = curpage >= 1 ? curpage : 1
      return index + 1 + (curpage - 1) * limitpage
    },
    hSubmit() {
      // 表单兜底校验
      this.$refs.form.validate(valid => {
        if (valid) {
          // alert('校验通过')
          // 根据isEdit来决定做添加，还是编辑
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })
    },
    // 用户点击了添加
    hAdd() {
      // 显示弹框
      this.showDialog = true

      this.isEdit = false
    },
    async doAdd() {
      // 1. 调用api
      const res = await addRole(this.formData)
      console.log(res)
      // 2. 关闭弹框
      this.showDialog = false
      // 3. 确保新添加的数据能被立即查出来，更新页码
      //    访问最后一页
      if (this.isLastPageFulled) {
        this.pageParams.page = this.maxPage + 1
      } else {
        this.pageParams.page = this.maxPage
      }
      // 4. 重发请求
      this.loadRoles()
    },
    async doEdit() {
      const res = await editRole(this.formData)
      console.log('编辑角色', res)
      // 关闭弹框
      this.showDialog = false
      // 重发请求
      this.loadRoles()
    },
    async loadRoles() {
      const res = await getRoles(this.pageParams)
      console.log('查询角色信息', res)
      this.list = res.data.rows
      this.total = res.data.total
      // 同步更新当前的页码
      this.curPage = this.pageParams.page
    },
    // 用户调整了每页显示的条数
    hSizeChange(pagesize) {
      // 1. 更新每页条数
      this.pageParams.pagesize = pagesize
      // 2. 重发请求
      this.loadRoles()
    },
    // 用户点了页码
    hCurrentChange(curPage) {
      // alert(curPage)
      // 更新页码
      this.pageParams.page = curPage
      // 重发请求
      this.loadRoles()
    },

    // 分配权限
    hAssign(id) {
      this.curId = id
      // 弹框
      this.showDialogPermission = true

      // 手动调用获取详细的方法
      this.$nextTick(() => {
        this.$refs.assignPermission.loadPermissionById()
      })
    },
    hAssignPermSuccess() {
      // 用户分配权限成功
      // 1. 隐藏弹框
      this.showDialogPermission = false
      // 2. 重发请求（这里表格中的数据没有具体的权限信息，重发请求意义不大）
    },

    async doDel(id) {
      // 做删除
      const res = await delRole(id)
      console.log(res)

      if (this.list.length === 1) { // 表格中只有一条数据
        this.pageParams.page--
        if (this.pageParams.page <= 0) {
          this.pageParams.page = 1
        }
      }

      // 重新查询
      this.loadRoles()
      // 2. 提示用户
      this.$message({ type: 'success', message: '删除成功!' })
    },
    hDel(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDel(id)
      }).catch(() => {
      })
    },
    // 用户点击了编辑
    hEdit(data) {
      console.log(' 用户点击了编辑', data)
      // 1. 显示弹框
      this.showDialog = true
      // 2. 数据回填： 对象的引用赋值
      // this.formData = data
      this.formData = { ...data } // 浅拷贝

      // 3. 设置编辑状态
      this.isEdit = true
    },
    // 弹框关闭了，showDialog 从true --> false
    hClose() {
      this.formData.name = ''
      this.formData.description = ''
      this.formData.id = ''
      // 清空表单的数据
      this.$refs.form.resetFields()
    }
  }
}
</script>
